import Plugin from './plugin'
import {CN,EN,Web} from '../config'

const cssText = `

.#{cn.tip}{
    font-size: 12px;
    position: absolute;
    top:0;
    width: 200px;
    padding: 10px;
    border-radius: 3px;
    background-color: #{icn.theme};
    color: #fff;
    font-weight: bold;
    left: 0;
    right: 0;
    margin: auto;
    transition: 0.3s all linear;
    transform:translate(0,-150%);
    text-align: center;
    z-index: 4;
}
.#{cn.tip}.#{cn.withshow}{
    transform: translate(0,20px);
}
`
export default class Toast extends Plugin{
	constructor($event){
		super()
		this.$event = $event;
		this.injectStyle(cssText,Web)
		this.render()
		this.bind()
	}
	render(){
		let $dom = this.$dom = document.createDOM("tip",{
			id:CN.tip,
			class:CN.tip
		})
		this.$event.emit(EN.layout_render,this.$dom)
	}
	bind(){
		this.$event.on(EN.tip,(data)=>{
			if(data)
				this.focusIn(data)
			else 
				this.focusOut()
		})
	}
	focusIn(data){
		this.$dom.innerHTML = data.text;
		this.$dom.classList.add(CN.withshow)
		if(data.timeOut){
			setTimeout(()=>{
				this.focusOut()
			},data.timeOut)
		}
	}
	focusOut(){
		this.$dom.classList.remove(CN.withshow)
	}
}